<script setup>
const props = defineProps({

  name: {
    type: String,
    default: ''
  },
  label: {
    type: String,
    default: ''
  },
  placeholder: {
    type: String,
    default: ''
  },
})

const show = ref(false)

const attrs = useAttrs()

const modelValue = defineModel()
const list = ref([]);
const loading = ref(false);
const finished = ref(false);

const searchValue = ref("");

const onLoad = () => {
  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  setTimeout(() => {
    for (let i = 0; i < 10; i++) {
      list.value.push(list.value.length + 1);
    }

    // 加载状态结束
    loading.value = false;

    // 数据全部加载完成
    if (list.value.length >= 40) {
      finished.value = true;
    }
  }, 1000);
};
</script>

<template>

  <van-field
    v-bind="attrs"
    v-model="modelValue"
    type="text"
    is-link
    readonly
    :name="name"
    :label="label"
    @click="show = true"
    :placeholder="placeholder"
  ></van-field>
  <van-popup v-if="show" v-model:show="show" position="bottom"
             :style="{ height: '60vh' }">
    <div class="h-full flex flex-col">
      <van-search v-model="searchValue" placeholder="请输入搜索关键词"/>
      <div class="flex-1 min-h-0 overflow-y-auto">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"

        >
          <van-cell v-for="item in list" :key="item" :title="item"/>
        </van-list>
      </div>
    </div>

  </van-popup>
</template>

<style scoped>

</style>
